<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.department>>>.layui-table td,
.layui-table th {
    padding: 9px 2px;
    white-space: nowrap;
}

.layui-row {
    overflow: hidden;
}

.select-item {
    width: 100%;
    text-align: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.layui-inline {
    padding: 5px 0;
}

.layui-form>>>.layui-form-select {
    z-index: inherit;
}
</style>

<template>
<div class="organization">
    <form class="layui-form">
        <div class="layui-row">
            <div class="layui-inline" style="width: 200px;">
                <select id="operator" name="operator" class="layui-form-select" lay-search>
                    <option value="">请输入发起人</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 200px;">
                <select id="currentCustomer" name="customer" class="layui-form-select" lay-search>
                    <option value="">请选择客户</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 130px">
                <input type="text" id="starttime" autocomplete="off" placeholder="请选择开始时间" class="layui-input key">
            </div>
            <div class="layui-inline" style="width: 130px">
                <input type="text" id="endtime" autocomplete="off" placeholder="请选择结束时间" class="layui-input key">
            </div>
            <div class="layui-inline" style="width: 150px">
                <select id="flag" name="flag" lay-search lay-filter="flag">
                    <option value="">请选择充值类型</option>
                    <option v-for="(item, index) in flags" :key="item.dictkey" :value="item.dictkey">{{item.dicttext}}</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 150px">
                <select id="status">
                    <option value="">请选择充值状态</option>
                    <option v-for="(item, index) in status" :key="item.dictkey" :value="item.dictkey">{{item.dicttext}}</option>
                </select>
            </div>
            <button type="button" class="layui-btn sou" @click="search">搜索</button>
        </div>
    </form>

    <div style="width: 100%; overflow: auto;margin-bottom: 10px;" id="textarea">
        <table class="layui-table layui-form">

            <thead>
                <tr>
                    <th>订单编号</th>
                    <th>客户名称</th>
                    <th>发起人</th>
                    <th>所在部门</th>
                    <th>充值金额</th>
                    <th>充值类型</th>
                    <th>发起时间</th>
                    <th>备注</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr class="id9" v-for="(val, index) in rechargs" :key="index">
                    <td>{{val.code}}</td>
                    <td>{{val.customer}}</td>
                    <td>{{val.operator}}</td>
                    <td>{{val.departname}}</td>
                    <td>{{val.amount}}</td>
                    <td>{{val.flagName}}</td>
                    <td>{{val.createtime}}</td>
                    <td>{{val.remark}}</td>
                    <td>{{val.statusname}}</td>
                </tr>
                <!--<tr class="id9">
                    <td>{{val.nodes}}</td>
                </tr>-->
            </tbody>
        </table>
    </div>
    <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
</div>
</template>

<script>
import Pagination from '../common/Pagination.vue'
export default {
    name: 'RechargeReport',
    components: {
        Pagination
    },
    data() {
        return {
            currentPage: 1,
            totalPage: 0,
            rechargs: [],
            status: [],
            flags: [],
            hc_select: '',
            currentCustomer: ''
        }
    },
    updated: function () {
        layui.form.render('select');
        layui.form.render();
    },
    mounted() {
        let that = this;
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            that.getPageData();
            that.loadUser();
            that.getCustomer();
            that.getDictEmnu();
            form.on('select', function (data) {
                that[data.elem.name] = data.elem.value;
            })
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#starttime', //指定元素
                value: that.getNowMonthDate()
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#endtime', //指定元素
                value: that.getDate()
            });
            //获取计价方式
            $.ajax({
                url: '/sales/Sellform!getDictEmnu.action',
                data: {
                    dicttype: "110"
                },
                type: "post",
                dataType: "json",
                success: function (res) {
                    if (res.info != null && res.info != 'error') {
                        that.flags = res.info.filter(item =>{
                            return item.dictkey != 3;
                        });
                    } else {
                        that.toastError('获取充值类型失败!');
                    }
                },
                complete: function () {

                }
            });
        });
    },
    methods: {
        search: function () {
            this.getPageData('search');
        },
        turnPage: function (data) {
            this.currentPage = data;
            this.getPageData();
        },
        //获取当前日期
        getDate: function (dayCount = 0) {
            var dd = new Date();
            dd.setDate(dd.getDate() + dayCount); //设置日期
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1; //获取当前月份的日期
            var fullM = m.length == 2 ? m : '0' + m;
            var d = dd.getDate();
            return y + "-" + fullM + "-" + d;
        },
        //获取本月第一天
        getNowMonthDate: function () {
            var date = new Date();
            var year = date.getFullYear() + "";
            var month = (date.getMonth() + 1) + "";
            // 本月第一天日期
            var begin = year + "-" + month + "-01"
            return begin;
        },
        getPageData: function (type = '') {
            let that = this;
            let loader = layui.layer.load();

            let postData = {};
            postData.pageSize = 10;
            if (type != 'search') {
                postData.pageNo = that.currentPage;
            } else {
                postData.pageNo = 1;
            }
            postData.operator = $("#operator").val();
            postData.customer = $("#currentCustomer").val();
            postData.starttime = $("#starttime").val();
            postData.endtime = $("#endtime").val();
            postData.flag = $("#flag").val();
            postData.status = $("#status").val();
            console.log("充值状态"+$("#status").val())
            $.ajax({
                url: '/transaction/Recharge!page.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    if (res.status == "success") {
                        if (res.result != undefined) {
                            that.totalPage = res.result.pageCount;
                            that.rechargs = res.result.rows;
                        }
                    } else {
                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
        getDictEmnu: function () {
            //获取计价方式
            let that = this
            $.ajax({
                url: '/sales/Sellform!getDictEmnu.action',
                data: {
                    dicttype: "51"
                },
                type: "post",
                dataType: "json",
                success: function (res) {
                    if (res.info != null && res.info != 'error') {
                        that.status = res.info;
                    } else {
                        that.toastError('获取充值状态失败!');
                    }
                },
                complete: function () {

                }
            });

        },
        //获取所有用户
        loadUser: function () {
            $.ajax({
                url: '/system/Tuser!getUserAll.action',
                type: "post",
                dataType: "json",
                success: function (res) {
                    if (res != undefined && res.info != undefined) {
                        $("#operator").empty();
                        $('#operator').append(new Option('请选择发起人', ""));
                        $.each(res.info, function (index, item) {
                            $('#operator').append(new Option(item.realname, item.realname)); // 下拉菜单里添加元素。
                        });
                    } else {
                        alert("系统错误");
                    }
                }
            });
        },
        getCustomer: function () {
            let that = this;
            $.ajax({
                url: '/sales/Sellform!findCustomer.action',
                type: "get",
                dataType: "json",
                async: false,
                success: function (res) {
                    if (res.status == 'true') {
                        //this.customers = res.result;
                        $("#currentCustomer").empty();
                        $('#currentCustomer').append(new Option('请选择客户', ""));
                        $.each(res.result, function (index, item) {
                            $('#currentCustomer').append(new Option(item.name, item.name)); // 下拉菜单里添加元素。
                        });
                    } else {
                        that.toast('获取客户数据失败！');
                    }
                }
            });
        }
    }
}
</script>
